<template>
  <div class="container">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 头部搜索框 -->
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="学科名称">
              <el-input v-model="nbName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="inputOver">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submeUser">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-button
            class="top-right-button"
            type="success"
            icon="el-icon-edit"
            @click="dialogVisible = true"
            >新增学科</el-button
          >
        </el-row>
        <!-- 消息提示 -->
        <el-alert type="info" show-icon :closable="false">
          数据一共{{ this.counts }}条</el-alert
        >
      </div>
      <!-- 表格 -->
      <el-table :data="subjectsList" style="">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            <span v-if="scope.row.isFrontDisplay == 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="数目数量"> </el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <span class="caozuo" @click="directorys(scope.row)">学科分类</span>
            <span class="caozuo" @click="tags(scope.row)">学科标签</span>
            <span class="caozuo" @click="ModifiesRemove(scope.row)">修改</span>
            <span class="caozuo" @click="subjectsRemove(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="rightFengye">
        <el-pagination
          class="pagination-right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[4, 6, 8, 10]"
          :page-size="queryInfo.pagesize"
          layout="  prev, pager, next,sizes, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增学科弹出框 -->
    <el-dialog
      @close="addDialogClose"
      title="新增学科"
      :visible.sync="dialogVisible"
      width="25%"
    >
      <el-form
        :rules="subjectsRules"
        :model="userlist"
        ref="subjectsFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            class="shezhi"
            placeholder="请输入学科名称"
            v-model="userlist.subjectName"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch
            class="shezhibutton"
            validate-event
            active-color="#13ce66"
            inactive-color="#ff4949"
            change
            v-model="userlist.isFrontDisplay"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改学科弹出框 -->
    <el-dialog
      title="修改学科"
      :visible.sync="ModifiesDialogVisible"
      width="25%"
    >
      <el-form
        :rules="subjectsRules"
        :model="Modifieslist"
        ref="ModifiesFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            class="shezhi"
            v-model="Modifieslist.subjectName"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-switch
        style="display: block"
        active-color="#13ce66"
        inactive-color="#ff4949"
        inactive-text="是否显示"
        @change="gaibian"
        v-model="chenrui"
      >
      </el-switch>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ModifiesDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ModifiesUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  add,
  remove,
  update,
  simple,
  detail,
} from "../../api/hmmm/subjects";
import { parseTimeByString } from "../../filters/index";
export default {
  data() {
    return {
      chenrui: true,
      subjectsList: [],
      userlist: {
        subjectName: "",
        isFrontDisplay: 1,
      },
      Modifieslist: {
        subjectName: "",
        isFrontDisplay: 1,
      },
      nbName: "",
      queryInfo: {
        subjectName: "",
        pagesize: 10,
        page: 1,
        id: "",
      },
      counts: 0,
      dialogVisible: false, //控制新增学科弹出框显示隐藏
      ModifiesDialogVisible: false, //修改弹出框控制显示隐藏
      //表单验证规则
      subjectsRules: {
        subjectName: [
          { required: true, message: "请输入学科名称", trigger: "blur" },
        ],
        isFrontDisplay: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.subjectsUser();
  },
  methods: {
    // 获取数据
    async subjectsUser() {
      const { data: res } = await list(this.queryInfo);
      // console.log(this.queryInfo);
      this.subjectsList = res.items;
      // console.log(this.subjectsList);
      this.counts = res.counts;
    },
    // 搜索
    submeUser() {
      this.queryInfo.subjectName = this.nbName;
      this.subjectsUser();
      this.queryInfo.page = 1;
    },
    // 分页 页面显示数据条发生变化时触发
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.subjectsUser();
    },
    // 分页 页码值发生变化时触发
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      //页面发生跳转时清空搜索框内内容
      this.queryInfo.subjectName = "";
      this.subjectsUser();
    },
    // 清空
    inputOver() {
      this.queryInfo.subjectName = "";
      this.nbName = "";
      this.subjectsUser();
      this.queryInfo.page = 1;
    },
    // 添加用户
    addUser() {
      this.$refs.subjectsFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请填写学科名称");
        // 发起添加用户请求
        const { data } = await add(this.userlist);
        this.$message.success("新增学科成功");
        // console.log(data);
        this.dialogVisible = false; //隐藏用户添加页面
        this.subjectName = "";
        this.subjectsUser(); //重新获取用户列表数据
        this.queryInfo.page = 1;
      });
    },
    //关闭后清空
    addDialogClose() {
      this.$refs.subjectsFormRef.resetFields();
    },
    // 删除按钮
    async subjectsRemove(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该参数, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // 用户取消了删除操作
      if (confirmResult !== "confirm") return this.$message.info("已取消删除");
      const { data } = await remove(id);
      this.$message.success("删除用户成功");
      // console.log(this.queryInfo.page);
      // console.log(this.subjectsList.length - 1);
      if (this.subjectsList.length - 1 === 0 && this.queryInfo.page > 1) {
        // console.log(this.queryInfo.page);
        this.queryInfo.page - 0;
        // console.log(this.queryInfo.page);
        this.queryInfo.page -= 1;
      }
      this.subjectsUser();
    },
    // 修改按钮获取数据
    async ModifiesRemove(id) {
      // console.log(id);
      const { config: res } = await update(id);
      // console.log(res.data);
      const newName = JSON.parse(res.data);
      // console.log(newName);
      // console.log(newName.subjectName);
      this.Modifieslist = newName;
      this.ModifiesDialogVisible = true;
      this.chenrui = id.isFrontDisplay == 1 ? true : false;
      // console.log(this.chenrui);
    },
    // 修改弹出框change事件
    gaibian() {
      if (this.chenrui == true) {
        this.Modifieslist.isFrontDisplay = true;
      } else {
        this.Modifieslist.isFrontDisplay = false;
      }
    },
    // 修改页面确定修改
    ModifiesUser() {
      this.$refs.ModifiesFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请输入学科名称");
        const { data } = await update(this.Modifieslist);
        this.$message.success("修改学科成功");
        this.subjectsUser();
        this.ModifiesDialogVisible = false;
      });
    },
    //跳转到目录页
    async directorys(row) {
      const { data } = await detail(row);
      console.log(data);
      console.log(data.id);
      this.$router.push({
        path: "/subjects/directorys",
        query: {
          id:row.id,
          name:row.subjectName
        },
      });
    },
    // 跳转到标签页
   async tags(row) {
      const { data } = await detail(row);
       console.log(data);
      console.log(data.id);
      this.$router.push({
        path: "/subjects/tags",
        query: {
          id:row.id,
          name:row.subjectName
        },
      });




    },
  },
};
</script>

<style scoped lang='less'>
.top-right-button {
  position: absolute;
  right: 0;
  top: 0;
}
.caozuo {
  font-size: 14px;
  margin-left: 10px;
  color: #40aaff;
  cursor: pointer;
}
.rightFengye {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
/deep/.el-pagination__jump {
  margin-left: 0;
}
/deep/.el-form-item__label {
  text-align: left;
}
/deep/.el-dialog__footer {
  text-align: center;
}
/deep/.el-switch span {
  color: #606266;
  font-weight: 600;
  font-size: 14px;
  margin-left: 5px;
}
/deep/.el-form-item__label {
  padding: 0;
  width: 70px !important;
}
/deep/.shezhi {
  margin-left: -20px !important;
}
.shezhibutton {
  margin-left: -25px !important;
}
</style>
